<template>
    <div>
        <el-row :gutter="20">
            <el-col>
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="@/assets/img/a.jpeg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ this.$store.state.user.oprname }}，欢迎进入！</div>
                            <div style="font-size: 18px; margin-top: 5px">{{ role }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        登录时间：{{ time }}
                        <span></span>
                    </div>
                    <!-- <div class="user-info-list">
                        上次登录地点：
                        <span>东莞</span>
                    </div> -->
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
                <el-card style="height:55vh">
                    <div slot="header" class="clearfix">
                        <span>基本信息</span>
                    </div>
                    <el-descriptions class="margin-top" :column="2" v-for="item in userInfo" :key="item.XM">
                        <el-descriptions-item label="姓名">{{ item.XM }}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{ item.XB }}</el-descriptions-item>
                        <el-descriptions-item label="年龄">{{ item.RYNL }}</el-descriptions-item>
                        <el-descriptions-item label="身份证">{{ item.SFZH }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ item.SJH }}</el-descriptions-item>
                        <el-descriptions-item label="单位">{{ item.YLJGMC }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱">{{ item.YX }}</el-descriptions-item>
                        <!-- <el-descriptions-item label="用户类型">{{item.ZC}}-{{item.ZY}}</el-descriptions-item> -->
                    </el-descriptions>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <el-table
                        :data="loginlogList"
                        border
                        height="50vh"
                        :header-cell-style="{
                            textAlign: 'center'
                        }"
                    >
                        <el-table-column prop="xh" label="序号" width="100px" align="center"></el-table-column>
                        <el-table-column prop="nr" label="登录日志" min-width="400px" align="left"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getLogAPI } from '@/api/backStage.js';
export default {
    name: 'dashboard',
    data() {
        return {
            name: 'admin',
            userInfo: [],
            time: '',
            loginlogList: []
        };
    },
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        this.time = localStorage.getItem('time');
        this.getOperationLogList();
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    methods: {
        async getOperationLogList() {
            let resLogin = await getLogAPI({
                token: this.$store.state.user.token,
                RZLX: 'dlrz'
            });
            if (resLogin.code == 'succ') {
                this.loginlogList = resLogin.result;
            }
        }
    }
};
</script>

<style scoped>
::v-deep .el-descriptions--small {
    font-size: 18px;
    color: #333;
}
.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 10px;
}

.mgb20 {
    margin-bottom: 20px;
}
</style>
